﻿<!--
-----------------------------------------------------------------------------------
<copyright file="Examples.html" company="Microsoft Corporation">
         (c) © 2016 Microsoft. All rights reserved.
    
</copyright>
---------------------------------------------------------------------------------
-->

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="CSS/StaticPages.css" />
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>

    <title>CheckMyCode - Examples</title>
	<meta charset="utf-8" />
</head>
<body>
    <header class="header">
        <h1 class="pageHeader">Examples</h1>
        <nav role="navigation"></nav>
        <script>
            $("nav").load("LoadHTML/Navigation.html");
        </script>
    </header>
    <br />
    <main class="main" id="exampleTop">
        <div class="info">
            <h2 class="sectionHeader">Introduction</h2>
            <p class="infoText">
                Welcome to the Examples page! Here, we go through sample problems step by step. The problem is
                bold and underlined. Instructions are bold, and added code during each step is bold and shown in red. 
                Some 'consider' questions are put in during some steps. Besides answering the question, see if you
                can figure out why they were asked in the first place (i.e. if a questions is asked about the use
                of &#62 instead of &#60 then analyze what would occur if the &#62 were used). Also, try to predict
                the next steps of the problem, so that you can check your understanding as you go. Remember that
                the steps shown are not the only way to solve the problem. You should try to take the end solutions
                to the problem and see if you can make them better or more useful. For example, making a multipurpose
                method.
            </p>
        </div>
        <div class="info">
            <h2 class="sectionHeader">Skip to problems</h2>
            <ul class="skipToLinks">
                <li><a href="#example1">Example 1</a></li>
                <li><a href="#example2">Example 2</a></li>
                <li><a href="#example3">Example 3</a></li>
            </ul>
        </div>
        <div class="example" id="example1">
            <h2 class="sectionHeader">Example 1</h2>
            <p></p>
            <script>
                $("#example1 p").load("Examples/1.html");
            </script>
        </div>
        <div class="example" id="example2">
            <h2 class="sectionHeader">Example 2</h2>
            Insert problem here!!!!!
        </div>
        <div class="example" id="example3">
            <h2 class="sectionHeader">Example 3</h2>
            Insert problem here!!!!!
        </div>
    </main>
    <br />
    <footer role="contentinfo">
        <script>
            $("footer").load("LoadHTML/Footer.html");
        </script>
    </footer>
</body>
</html>
